<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <head>
            <title>{{ title }}</title>
            <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
            <![endif]-->
            <!-- Código del Icono -->
			<!-- <link href="favicon.ico" type="image/x-icon" rel="shortcut icon" />
			<link rel="icon" href="tu_icono.ico" type="image/x-icon" /> IE -->
            <link rel='stylesheet' href='{{STATIC_URL}}bootstrap/css/bootstrap.css'>
            <link rel='stylesheet' href='{{STATIC_URL}}css/styles.css'>
            <link rel='stylesheet' href='{{STATIC_URL}}galleryview/css/jquery.galleryview-3.0-dev.css'>
            <link rel='stylesheet' href='{{STATIC_URL}}jquery-photowall/jquery-photowall.css'>
        </head>
        <body>
            <div class="container">
                {% include "base/header.html" %}
            </div>
            {% include "base/menu.html" %}
            <div class="container">
                {% block content %}{% endblock %}
                {% include "base/footer.html" %}
            </div>
            <script src="{{STATIC_URL}}js/jquery-1.8.2.js"></script>
            <script src="{{STATIC_URL}}js/jquery.validate.js"></script>
            <script src="{{STATIC_URL}}bootstrap/js/bootstrap.js"></script>
            <script src="{{STATIC_URL}}galleryview/js/jquery.easing.1.3.js"></script>
            <script src="{{STATIC_URL}}galleryview/js/jquery.galleryview-3.0-dev.js"></script>
            <script src="{{STATIC_URL}}galleryview/js/jquery.timers-1.2.js"></script>
            <script src="{{STATIC_URL}}jquery-photowall/jquery-photowall.js"></script>
            <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
            <script src="{{STATIC_URL}}js/jquery-gmap3-4.1/gmap3.js"></script>
            <script>
            	//$("#myModal").modal()                       // initialized with defaults
				//$("#myModal").modal({ keyboard: false })   // initialized with no keyboard
				$("#modalEnHoraBuena").modal('show'); 
				$("#modalNoEnviado").modal('show'); 
                $("a[rel=popover]").popover();
                $('#myCarousel').carousel({
                    interval : 7000
                });
                $('#gallery').galleryView({
                	autoplay : true,
                	show_panel_nav : false,
                	panel_animation : 'crossfade',
                	transition_speed : 2000,
                	show_filmstrip_nav : false,
                	show_filmstrip : false,
                	frame_opacity : 0.4,
                	show_infobar : false
                });
                $('#gallery2').galleryView({
                	autoplay : true,
                	panel_animation : 'crossfade',
                	transition_speed : 2000,
                	show_filmstrip_nav : false,
                	frame_opacity : 0.4,
                	show_infobar : false,
                	frame_height : 60
                });		                	
            </script>
			<script type="text/javascript">
				$(document).ready(function(){
				
					// start PhotoWall /galeria/
				    PhotoWall.init({
				        el:                 '#gallery3'               // Gallery element
				        ,zoom:              true                     // Use zoom
				        ,zoomAction:        'mouseenter'             // Zoom on action
				        ,zoomTimeout:       300                      // Timeout before zoom
				        ,zoomDuration:      100                      // Zoom duration time
				        ,zoomImageBorder:   5                         // Zoomed image border size 
				        ,showBox:           true                     // Enavle fullscreen mode
				        ,showBoxSocial:     false                     // Show social buttons
				        ,padding:           5                        // padding between images in gallery
				        ,lineMaxHeight:     150                      // Max set height of pictures line
				        ,lineMaxHeightDynamic: true                  // Dynamic lineMaxHeight. If set to True,
				                                                     // then line height will be changing on 
				                                                     // resize, coressponding to 
				                                                     // baseScreenHeight param
				        ,baseScreenHeight:  600                      // Base screen size from wich calculating dynamic lineMaxHeight  
				    });
				    
					// Max image width form Picasa
					// 94, 110, 128, 200, 220, 288, 320, 400, 512, 576, 640, 720, 800, 912, 
					// 1024, 1152, 1280, 1440, 1600
				     
				    // url: 'https://picasaweb.google.com/data/feed/api/user/118283508237214694671/albumid/5685978516288199793'
				     
					$.ajax({
						url: 'https://picasaweb.google.com/data/feed/api/user/115668524734854663594/albumid/5795661056718619985'
							 +'/?alt=json&fields=entry(gphoto:id,title,media:group(media:thumbnail,media:'
							 +'content))&imgmax=720',
						dataType: 'jsonp',
						success: function(data){
						    var photos = {}
					        if(!data.feed.entry) return;
					        for(var i in data.feed.entry) {
						        var e     = data.feed.entry[i].media$group;
						        var id    = data.feed.entry[i].gphoto$id.$t;
						        
						        var t1h   = e.media$thumbnail[2].height;
						        var t1w   = e.media$thumbnail[2].width;
						        var t1src = e.media$thumbnail[2].url
						        
						        var t2w   = Math.round(t1w * 1.5);
						        var t2h   = Math.round(t1h * 1.5);
				
						        var t2src = e.media$content[0].url+'/../../w'+t2w+'-h'+t2h+'/';
					            
					            var bsrc  = e.media$content[0].url;
					            var bw    = e.media$content[0].width;
					            var bh    = e.media$content[0].height;
					            
					            
						        photos[id] = {id:id,img:bsrc,width:bw,height:bh,th:{src:t1src,width:t1w,height:t1h,zoom_src:t2src,zoom_factor:1.5}};
						        
					        }	
						    PhotoWall.load(photos);
					    }
					    
					}); // end PhotoWall /galeria/
					
					// start ('#contact-form').validate
					$('#contact-form').validate({

					  rules: {
					  	nombre: {
					      minlength: 3,
					      required: true
					    },
					    email: {
					      required: true,
					      email: true
					    },
					    comentarios: {
					      minlength: 10,
					      required: true
					    }
					  },
					  messages: {
					  	//nombre: "Ingrese su nombre por favor",
					  	nombre: {
					       required: "Ingrese su nombre por favor"
					     },
					     email: {
					       required: "Ingrese su correo electr&#243;nico",
					       email: "El email no es v&#225;lido"
					     },
					     comentarios: {
					       required: "Ingrese un comentario por favor"
					     },
					   },
						//debug:true, // True para no enviar el formulario
						errorClass: "control-group error",  
						validClass: "control-group info",  
						errorElement: "span", 
						highlight: function(element, errorClass, validClass) {	
							if (element.type === 'radio') { 
								this.findByName(element.name ).closest(".control-group").removeClass(validClass).addClass(errorClass);
							} else { 
								$(element).closest(".control-group").removeClass(validClass).addClass(errorClass);
							}
						},
						unhighlight: function(element, errorClass, validClass) {
							if (element.type === 'radio') {	
								this.findByName(element.name ).closest(".control-group").removeClass(errorClass).addClass(validClass);
							} else {
								$(element).closest(".control-group").removeClass(errorClass).addClass(validClass);
							}
						} ,
						submitHandler: function(form){
           				//	alert('El formulario ha sido validado correctamente!');
           					form.submit(); // Necesario para enviar el formulario. No es necesario en caso de quitar submitHandler
           					$('.btn').button('loading');
       					} 
					
					}); // end ('#contact-form').validate
					

				});
				 
				 // Coordenadas salon 18.998208,-98.22716
				$("#example").gmap3({
					action: 'addMarker',
					latLng: [18.998208,-98.22716],
					map:{
						center: true,
						zoom: 15
					},
					callback: function(){
						$(this).css('border', '1px solid #DDD');
					},
					options:{
						mapTypeControl: true,
						mapTypeControlOptions: {
							style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
						},
						navigationControl: true,
						scrollwheel: false,
						streetViewControl: false
					}
				});
			</script> 
        </body>
</html>